ul,li{
    list-style:none;
}
.containered{
    /* width: 1200px; */
    /* margin: 0 auto; */
    
}
.containered li{
    float: left;
    margin: 10px 15px;
}
.containered li img{
    width: 348px;
    height: 427px;
}
.containered-li{
    position: relative;
}
.containered-li-position{
    /* display:none; */
    position: absolute;
    bottom:9px;
    left:0;
    background:rgba(118, 96, 74,0.5);
    width:348px;
    height:56px;
}
.containered-li-positionDiv{
    text-align: center;
}
.containered-li-positionDiv>p{
    font-size:15px;
    color:#fff;
    line-height:56px;
}
#pictureViewer  .content {
    height: 626px;
    width: 1090px;
}
#pictureViewer img {
    object-fit: contain;
}
#pictureViewer .handel-prev:hover, #pictureViewer .handel-next:hover {
   background-color: rgba(189,154,57,0.95);
}
@media screen and (max-width: 1200px){
    #pictureViewer > .content {
        height: 426px;
        width: 890px;
    }
    /* .containered li img {
        width:
    } */
    .containered-li-position {
        width: 282px;
    }
}
@media screen and (max-width: 1000px){
    .containered li img {
        width: 329px;
        height: 427px;
    }
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
    .containered-li-position {
        width: 329px;
    }
}
@media screen and (max-width: 750px){
    .containered li img {
        width:329px;
        height: 327px;
    }
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
    .containered-li-position {
        width: 329px;
    }
}
@media screen and (max-width: 700px){
    .containered li img {
        width:305px;
        height: 327px;
    }
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
    .containered-li-position {
        width:305px;
    }
    /* .content{
        width: 424px !important;
        height: 328px !important;
    } */
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 735px){
    .containered li img {
        width:305px;
        height: 327px;
    }
    .containered-li-position {
        width:305px;
    }
    /* .content{
        width: 424px !important;
        height: 328px !important;
    } */
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 710px){
    .containered li img {
        width:305px;
        height: 327px;
    }
    .containered-li-position {
        width:305px;
    }
    /* .content{
        width: 424px !important;
        height: 328px !important;
    } */
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 686px){
    .containered li img {
        width:290px;
        height: 327px;
    }
    .containered-li-position {
        width:290px;
    }
    /* .content{
        width: 424px !important;
        height: 328px !important;
    } */
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 680px){
    .containered li img {
        width:290px;
        height: 327px;
    }
    .containered-li-position {
        width:290px;
    }
    /* .content{
        width: 424px !important;
        height: 328px !important;
    } */
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 622px){
    .containered li img {
        width:100%;
        height: 327px;
    }
    .containered-li-position {
        width:100%;
    }
    /* .content{
        width: 324px !important;
        height: 228px !important
    } */
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 600px){
    .containered li img {
        width:100%;
        height: 327px;
    }
    .containered-li-position {
        width:100%;
    }
    /* .content{
        width: 424px;
        height: 328px;
    } */
    #pictureViewer > .content {
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 500px){
    
    .content{
        width: 324px;
        height: 228px ;
    }
    #pictureViewer img{
        width:100%;
        height:100%;
    }
    .content{
        width: 100% !important;
        height: 100% !important
    }
    #pictureViewer .picture-content{
        width:100% !important;
    } 
    #pictureViewer .left{
        z-index:99;
    }   
    #pictureViewer .handel-next {
        background-image: url(../images/icons/next_white.png) !important;
    }
    #pictureViewer .handel-prev {
        background-image: url(../images/icons/prev_white.png) !important;
    }
}
